import { View, Video, Text, Image } from '@tarojs/components'
import styles from './index.module.scss'
import useCountdown from '@/hooks/useCountdown'
import { sendMqtt, stopMqtt } from '@/apis/mqtt'
import Taro from '@tarojs/taro'

// import iconRewind from '@/static/icons/fast-rewind.svg'
// import iconPause from '@/static/icons/pause.svg'
// import iconForward from '@/static/icons/fast-forward.svg'
import imgDoctorAvatar from '@/static/fake/doctor-avatar.png'

const RehabTraining = () => {
    const minute = 0.5

    const handleFinish = () => {
        stopMqtt()
        Taro.redirectTo({
            url: '/subPages/rehabComplete/index',
        })
    }

    const { remainingTime, resume, isActive } = useCountdown(
        minute * 60,
        handleFinish
    )

    const formatTime = (time: number) => {
        let min = Math.floor(time / 60)
        let sec = time % 60
        return `${min}'${sec}''`
    }

    const switchActive = () => {
        if (isActive) {
            handleFinish()
        } else {
            // 如果是首次开始
            if (minute === remainingTime / 60) {
                sendMqtt()
            }
            resume()
        }
    }

    // useEffect(() => {
    //     resume()
    // }, [])

    return (
        <View className={styles.container}>
            <View className={styles.videoWrapper}>
                <View className={styles.titleExample}>
                    <Text>示范</Text>
                </View>
                <Video
                    controls={false}
                    autoplay
                    muted
                    loop
                    src='https://www.xhxcteam.com/肘关节活动度60度.mp4'
                />
            </View>
            <View className={styles.horizon}></View>
            {/* <View className={styles.videoWrapper}>
                <View className={styles.title}>
                    <Text>我的</Text>
                </View>
                <Video src={fStatic('/example.mp4')} />
            </View> */}
            <View className={styles.info}>
                <View className={styles.infoTotalTime}>
                    <Text>{formatTime(remainingTime)}</Text>
                </View>
                <View className={styles.infoDoctor}>
                    <View className={styles.infoDoctorAvatar}>
                        <Image src={imgDoctorAvatar} />
                    </View>
                    <View>求助</View>
                </View>
            </View>
            <View
                className={styles.control}
                style={{
                    // @ts-ignore
                    '--time': minute * 60 + 's',
                    '--status': isActive ? 'running' : 'paused',
                }}
            >
                {/* <View className={styles.button}>
                    <Image src={iconRewind} className='icon' />
                </View>
                <View className={styles.button}>
                    <Image src={iconPause} className='icon' />
                </View>
                <View
                    className={styles.button}
                    onClick={() =>
                        Taro.redirectTo({
                            url: '/subPages/rehabComplete/index',
                        })
                    }
                >
                    <Image src={iconForward} className='icon' />
                </View> */}
            </View>
            <View className={styles.control2} onClick={switchActive}>
                <View className={styles.button}>
                    {isActive ? '结束' : '开始'}
                </View>
            </View>
        </View>
    )
}
export default RehabTraining
